<template>
  <div class="meet-cont">
    <Tabs v-model:active-key="activeKey" class="meet-tabs">
      <TabPane v-for="(item, index) in tabList" :key="index" :tab="item.label">
        <component :is="item.component" />
      </TabPane>
    </Tabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';

  import { tabList } from './index.data';

  const activeKey = ref(0);
</script>

<style lang="less" scoped>
  .meet-cont {
    width: calc(100% - 32px);
    margin: auto;
    height: calc(100vh - 56px - 56px - 16px);
    background: @white;
    border-radius: 4px;
    overflow: hidden;

    .meet-tabs {
      :deep(.ant-tabs-nav, .ant-tabs-content-holder) {
        padding: 0 24px;
      }

      :deep(.ant-tabs-content-holder) {
        padding: 0 24px;
      }
    }
  }
</style>
